CONTRIBUTION

PROGRAMMER

ENGINE

UNREAL ENGINE 5

LANGUAGE

BLUEPRINTS

TYPE

COLLEGE PROJECT

In collaboration with a professor from Sheridan's Child and Youth Care program, Stop and Breathe is a game that is designed to teach players a breathing technique that can help them deal with the onset of a panic/anxiety attack.

You play as Ace, a teen who struggles with their anxiety and is trapped in their own mind. You learn the breathing technique throughout the game with your companion, Zen. Use the technique to clear away the anxiety and solve puzzles to progress.

The New School | Parsons School of Design
June 27 - 28th 2024

Stop and Breathe was recognized at the 2024 Games for Change Festival as a driving force for good and positive change and as a result was nominated and won the Best Student Project category. The game was also featured in the G4C Arcade and was playable to ticketholders.

Westin Harbour Castle
April 19th 2024

The Level Up Showcase was an event that saw multiple student projects being showcased and judged. An award cermony was held later that evening. The event opened to the general public at 4PM and saw thousands of patrons playing the student projects.

University of Toronto Mississauga
August 12 - 14th 2024

Our game was featured at the Serious Play Conference 2024. The game was playable to ticketholders. Our team also gave a presentation on our game titled "Stop & Breathe: Tackling Youth Anxiety with Games" where we talked about problems, solutions and key takeaways that we learned while developing our game.

Anxiety Effect

The team wanted to have the anxiety to have a visual representation on the world around the player. Originally, the idea was to have the anxiety "cloud" the area and once the player performs a breathing technique it would push away the fog and reveal the area and unlock the puzzles the player needs to complete to progress. My first idea was exploring Unreal's Volumetric Fog system. Unfortunately, I don't have images of this concept because it was extremely early in development and I pivoted away from this rather quickly. There is a video by MrKosiej on YouTube that demonstrates how this would have been implemented found here! The method works really well for a top-down perspective but there are issues concerning visibility for a 3D side-scrolling puzzle-platformer. How can I make sure players see where they are? How can I ensure they can see how big a gap is to make a jump? How can I make sure they don't get lost in the cloudy environment while exploring for the way forward? A solution could include decreasing the density of the fog but initial testing made the fog too weak to convey the desired effect.

First Iteration

I decided to try to "colour" the world instead to protray the anxiety affect instead so I set my eyes on the Post Processing Volume (PPV) that was in the scene by default. The PPV lets you set materials that can then be overlayed onto the screen, allowing for cool visuals and effects. This was how our chromatic aberration effect was developed later by a colleague. So I created a Post Processing Material (PPM) that is specifically for the PPV and added an effect where it tints the screen darker than usual. Then I attached an invisible circle static mesh to the player controller and set the size to 0 when beginning play. I then enabled a setting on the mesh called "Render CustomDepth Pass." Because of how I set up the PPM, this will allow anything within the screen bounds of the circle static mesh to ignore the PPV material. Then as the player breathes, I make this circle bigger and bigger and it effectively dispels the anxiety away! (right)

Initial Anxiety Effect

No Screen Shake on Mess Up

Screen Shake on Mess Up

I later added the ability to mess up but the breathing but be able to try again. By itself it didn't "feel" like the player messed up but rather cancelled the inputs. So I added a subtle screenshake to signify a mistake was made.

Changes

After some playtests with peers in the same year, it was quickly realized that due to the bounds between "Anxiety" and "Calm" being a hard edge and the "Anxiety" itself is darkness, that the effect felt more like someone feeling depressed than someone feeling anxious. After some brainstorming, the team decided that we should change the current state of the effect drastically. It would now encompass 3 features:

  • Saturation control
  • Chromatic abbrevation
  • Vignette

I would be fully responsible for saturation control and the vignette while another team member, Dawson would be responsible for creating the chromatic abbrevation material which I would later implement.

The team took decided this was the best way to do it because the onset of anxiety is usually a gradual change that an individual would feel. It doesn't flip on like a switch. This change would allow us to convey this gradually change through the visuals of the game. The saturation, vignette and even the intensity of the chromatic abbrevation could be adjusted during runtime to slowly show the onset of the anxiety.

I decided to start working on the saturation effect. This effect would cause the color in the world to solely come back as the player performs the breathing exercises. The PPV has setting that allows the developer to change the Global Saturation within the viewport with a value. 0 meant the world was desaturated while 1 meant it was saturated. I tied the saturation increase to be equally distributed across each consecutive breathing sequence. For example, in the Atrium the player has to perform the breathing exercises 3 times before continuing to the next area. Each successful sequence would increase the saturation by 0.33... so after the player finished performing the exercises it would be (effectively) be 1, a fully saturated world! I later changed the max to 1.2 to show a little more colour to the world. The vignette works a very similar way but with a max intensity of 1.5.

Saturation Slowly Returning on each Sequence

Getting the Culling Effect on the Breathing Circle

Due to the saturation making everything monochromatic, I wanted to at least make the breathing circle standout so players would be drawn to it and investigate it, so they could start performing the breathing exercises. This would've been possible with "Render CustomDepth Pass" but since the Global Saturation doesn't involve using a PPM, this feature has no effect. Since I felt this effect would be crucial to the player experience, I investigated whether or not I could replicate this effect in a PPM. I used the same PPM i created from the first iteration and saw there was a desaturation node and after some playing around, I was able to get the exact same effect with the added benefit of culling any objects I desired!

BC not culled from the effect

BC being culled from the effect